<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>绿色通道</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../css/feedback.css" />
		<style>
			.wrapper-dropdown-3 {
				/* Size and position */
				position: relative;
				width: 90%;
				margin: 0px 10px;
				padding: 20px;
				/* Styles */
				background: #fff;
				border-radius: 7px;
				border: 1px solid rgba(0, 0, 0, 0.15);
				box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
				cursor: pointer;
				outline: none;
				/* Font settings */
				font-weight: bold;
				color: #8AA8BD;
			}
			
			.wrapper-dropdown-3 {
				font-size: 17px;
				display: block;
				width: 93%;
				padding: 10px 10px;
				margin-bottom: 10px;
				text-align: left;
				font-weight: bold;
				color: #8AA8BD;
				margin-left: 15px;
			}
			
			.wrapper-dropdown-3:after {
				content: "";
				width: 0;
				height: 0;
				position: absolute;
				right: 15px;
				top: 50%;
				margin-top: -3px;
				border-width: 6px 6px 0 6px;
				border-style: solid;
				border-color: #8aa8bd transparent;
			}
			
			.wrapper-dropdown-3 .dropdown {
				/* Size & position */
				position: absolute;
				top: 140%;
				left: 0;
				right: 0;
				/* Styles */
				background: white;
				border-radius: inherit;
				border: 1px solid rgba(0, 0, 0, 0.17);
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
				font-weight: normal;
				-webkit-transition: all 0.5s ease-in;
				-moz-transition: all 0.5s ease-in;
				-ms-transition: all 0.5s ease-in;
				-o-transition: all 0.5s ease-in;
				transition: all 0.5s ease-in;
				list-style: none;
				/* Hiding */
				opacity: 0;
				pointer-events: none;
				z-index: 1;
			}
			
			.wrapper-dropdown-3 .dropdown:after {
				content: "";
				width: 0;
				height: 0;
				position: absolute;
				bottom: 100%;
				right: 15px;
				border-width: 0 6px 6px 6px;
				border-style: solid;
				border-color: #fff transparent;
			}
			
			.wrapper-dropdown-3 .dropdown:before {
				content: "";
				width: 0;
				height: 0;
				position: absolute;
				bottom: 100%;
				right: 13px;
				border-width: 0 8px 8px 8px;
				border-style: solid;
				border-color: rgba(0, 0, 0, 0.1) transparent;
			}
			
			.wrapper-dropdown-3 .dropdown li a {
				display: block;
				padding: 10px;
				text-decoration: none;
				color: #8aa8bd;
				border-bottom: 1px solid #e6e8ea;
				box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
				-webkit-transition: all 0.3s ease-out;
				-moz-transition: all 0.3s ease-out;
				-ms-transition: all 0.3s ease-out;
				-o-transition: all 0.3s ease-out;
				transition: all 0.3s ease-out;
			}
			
			.wrapper-dropdown-3 .dropdown li i {
				float: right;
				color: inherit;
			}
			
			.wrapper-dropdown-3 .dropdown li:first-of-type a {
				border-radius: 7px 7px 0 0;
			}
			
			.wrapper-dropdown-3 .dropdown li:last-of-type a {
				border: none;
				border-radius: 0 0 7px 7px;
			}
			/* Hover state */
			
			.wrapper-dropdown-3 .dropdown li:hover a {
				background: #f3f8f8;
			}
			/* Active state */
			
			.wrapper-dropdown-3.active .dropdown {
				opacity: 1;
				pointer-events: auto;
			}
			/* No CSS3 support */
			
			.no-opacity .wrapper-dropdown-3 .dropdown,
			.no-pointerevents .wrapper-dropdown-3 .dropdown {
				display: none;
				opacity: 1;
				/* If opacity support but no pointer-events support */
				pointer-events: auto;
				/* If pointer-events support but no pointer-events support */
			}
			
			.no-opacity .wrapper-dropdown-3.active .dropdown,
			.no-pointerevents .wrapper-dropdown-3.active .dropdown {
				display: block;
			}
			
			.mui-content {
				background-color: #FFFFFF;
			}
			
			.dowebok ul {
				list-style-type: none;
			}
			
			.dowebok li {
				display: inline-block;
				margin-top: 10px;
				margin-right: 15px;
				/*width: 28%;*/
				background-color: #ffffff;
				border-radius: 10px;
				border: 1px solid rgba(0, 0, 0, 0.15);
				text-align: -webkit-center;
				font-size: 12px;
			}
			
			input.labelauty+label {
				font: 12px "Microsoft Yahei";
				padding-left: 15px;
				padding-right: 15px;
			}
			
			.mui-table-view-cell.mui-active {
				background-color: #FFFFFF;
			}
			
			.mui-table-view:before {
				height: 0px;
			}
			
			.mui-btn:enabled:active,
			button.mui-active:enabled,
			button:enabled:active {
				color: #fff;
				background-color: #fff;
			}
			
			.mui-table-view:after {
				height: 0;
			}
			
			.shangmenTime button {
				font-size: 17px;
				display: block;
				width: 100%;
				padding: 10px 10px;
				margin-bottom: 0px;
				text-align: left;
				font-weight: bold;
				color: #8AA8BD;
				border-radius: 7px;
			}
			
			.mui-table-view-cell {
				padding-top: 0px;
			}
			
			li {
				list-style: none;
			}
			
			.wrapper-demo .mui-table-view-cell {
				padding-right: 0;
			}
			
			.mui-row .mui-table-view-cell .wrapper-dropdown-3 {
				margin-left: 0px;
			}
			
			.mui-row {
				padding-right: 15px;
			}
			
			.mui-input-row {
				padding-left: 15px;
				padding-right: 15px;
			}
			
			.feedback .image-item .image-up {
				height: 65px;
				width: 65px;
				border-radius: 10px;
				line-height: 65px;
				/* border: 1px solid #ccc; */
				color: #ccc;
				display: list-item;
				text-align: center;
				background: #e3e3e3;
			}
			
			textarea {
				margin-bottom: 0px;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">绿色通道</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed shangmenTime" id="shangmenTime">
				<li class="mui-table-view-cell">
					<a href="#" class="">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-xs-10">
								<span class="mui-ellipsis address"><span class="mui-icon iconfont icon-bitian"></span><button id="shangmenTime_button" data-options="{}" class="btn mui-btn mui-btn-block">请选择上门时间</button>
							</div>
						</div>
					</a>
				</li>
			</ul>
			<section class="main">
				<div class="wrapper-demo">
					<div id="dd1" class="wrapper-dropdown-3" tabindex="1">
						<span>请选择医院</span>
						<ul class="dropdown">
							<li id="1">
								<a><i class="icon-envelope icon-large"></i>吉大一院</a>
							</li>
							<li id="59c4d74b56c2b44440f62bb3">
								<a><i class="icon-truck icon-large"></i>吉大二院</a>
							</li>
							<li id="59c4d74c56c2b44440f62bb4">
								<a><i class="icon-truck icon-large"></i>中日联谊医院</a>
							</li>

						</ul>
					</div>

					<div id="dd2" class="wrapper-dropdown-3" tabindex="1">
						<span>请选择科室</span>
						<ul class="dropdown">
							<li id="1">
								<a><i class="icon-envelope icon-large"></i>MDT特需门诊</a>
							</li>
							<li id="59c4d74b56c2b44440f62bb3">
								<a><i class="icon-truck icon-large"></i>病理科</a>
							</li>
							<li id="59c4d74c56c2b44440f62bb4">
								<a><i class="icon-truck icon-large"></i>产科</a>
							</li>
							<li id="59c4d74c56c2b44440f62bb4">
								<a><i class="icon-truck icon-large"></i>产前诊断中心</a>
							</li>
						</ul>
					</div>
					<div class="mui-row">
						<div class="mui-col-sm-6 mui-col-xs-6">
							<!--<li class="mui-table-view-cell">-->
							<div id="dd3" class="wrapper-dropdown-3" tabindex="1">
								<span>请选择专家</span>
								<ul class="dropdown">
									<li id="1">
										<a><i class="icon-envelope icon-large"></i>李明</a>
									</li>
									<li id="59c4d74b56c2b44440f62bb3">
										<a><i class="icon-truck icon-large"></i>李越华</a>
									</li>
									<li id="59c4d74c56c2b44440f62bb4">
										<a><i class="icon-truck icon-large"></i>钱晓明</a>
									</li>
								</ul>
							</div>
							<!--</li>-->
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6">
							<!--<li class="mui-table-view-cell">-->
							<div id="dd4" class="wrapper-dropdown-3" tabindex="1">
								<span>请选择普通医生</span>
								<ul class="dropdown">
									<li id="1">
										<a><i class="icon-envelope icon-large"></i>李明</a>
									</li>
									<li id="59c4d74b56c2b44440f62bb3">
										<a><i class="icon-truck icon-large"></i>李越华</a>
									</li>
									<li id="59c4d74c56c2b44440f62bb4">
										<a><i class="icon-truck icon-large"></i>钱晓明</a>
									</li>
								</ul>
							</div>
							<!--</li>-->
						</div>
					</div>
				</div>
			</section>

			<div class="mui-input-row">
				<textarea id="illmiaoshu" rows="5" placeholder="请详细描述您的身体状况，平台会在24小时内给您发送预约消息！"></textarea>
			</div>
			<div id="feedback" class="mui-page feedback">
				<div class="mui-page-content">
					<div class="mui-content-padded">
						<p>图片(提供问题截图,总大小10M以下)</p>
						<div id='image-list' class="row image-list">
						</div>
					</div>
				</div>
			</div>

		</div>
		<div class="mui-content-padded">
			<button id='save' class="mui-btn mui-btn-block mui-btn-warning">保存</button>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/xiangyingshi.js"></script>
	<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="../js/jquery-labelauty.js"></script>
	<script type="text/javascript" src="../js/constants.js"></script>
	<script src="../js/mui.picker.min.js"></script>
	<script type="text/javascript" src="../js/base64.js"></script>
	<script type="text/javascript" src="../js/exif.js"></script>
	<script type="text/javascript" src="../js/mobileBUGFix.mini.js"></script>
	<script type="text/javascript" src="../js/feedbackMUI.js"></script>
	<script>
		var shenfen_img = [];
		mui.plusReady(function() {
			if(plus.navigator.isImmersedStatusbar()) { // 兼容immersed状态栏模式
				// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
				topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
				document.querySelector("header").style.height = topoffset;
				document.querySelector("header").style.paddingTop = "20px";
				document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = topoffset;
			}
			// 加载完毕后关闭等待框，并展示页面
			var currentView = plus.webview.currentWebview();
			currentView.show('slide-in-right', 200);
			plus.nativeUI.closeWaiting();

			var self = plus.webview.currentWebview();
			var item_id = self.ITEM_ID;
			var item_name = self.ITEM_NAME;
		});
		var service_item = {};
		/*下拉选择框*/
		function DropDown(el) {
			this.dd = el;
			this.placeholder = this.dd.find('span');
			this.opts = this.dd.find('ul.dropdown > li');
			this.val = '';
			this.index = -1;
			this.initEvents();
			this.opts2 = this.dd.find('ul.dropdown>li>a');
		}
		DropDown.prototype = {
			initEvents: function() {
				var obj = this;

				obj.dd.on('click', function(event) {
					$(this).toggleClass('active');
					return false;
				});

				obj.opts.on('click', function() {
					var selectItem = '';
					var opt = $(this);
					obj.val = opt.text(); //获取value值
					obj.index = opt.index();
					obj.id = opt.attr("id"); //获取ID值
					obj.placeholder.text(obj.val);
					var item = obj.val.trim();
				});

			},
			getValue: function() {
				return this.val;
			},
			getIndex: function() {
				return this.index;
			}
		}

		$(function() {
			var dd = new DropDown($('#dd1'));
			$(document).click(function() {
				// all dropdowns
				$('.wrapper-dropdown-3').removeClass('active');
			});
			var dd = new DropDown($('#dd2'));
			$(document).click(function() {
				// all dropdowns
				$('.wrapper-dropdown-3').removeClass('active');
			});
			var dd = new DropDown($('#dd3'));
			$(document).click(function() {
				// all dropdowns
				$('.wrapper-dropdown-3').removeClass('active');
			});
			var dd = new DropDown($('#dd4'));
			$(document).click(function() {
				// all dropdowns
				$('.wrapper-dropdown-3').removeClass('active');
			});
		});

		$("#shangmenTime_button").click(function(e) {
			var optionsJson = this.getAttribute('data-options') || '{}';
			var options = JSON.parse(optionsJson);
			var id = this.getAttribute('id');
			/*
			 * 首次显示时实例化组件
			 * 示例为了简洁，将 options 放在了按钮的 dom 上
			 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
			 */
			var picker = new mui.DtPicker(options);
			picker.show(function(rs) {
				/*
				 * rs.value 拼合后的 value
				 * rs.text 拼合后的 text
				 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
				 * rs.m 月，用法同年
				 * rs.d 日，用法同年
				 * rs.h 时，用法同年
				 * rs.i 分（minutes 的第二个字母），用法同年
				 */
				$("#shangmenTime_button").text(rs.text);
				/* 
				 * 返回 false 可以阻止选择框的关闭
				 * return false;
				 */
				/*
				 * 释放组件资源，释放后将将不能再操作组件
				 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
				 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
				 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
				 */
				picker.dispose();
			});
		});
		$("#save").click(function(e) {
			mui.openWindow({
				url: '../geren_message/yycg.html',
				id: 'yycg.html',
				show: {
					autoShow: false, //页面loaded事件发生后自动显示，默认为true
					event: 'loaded' //页面显示时机，默认为titleUpdate事件时显示
				},
				waiting: {
					autoShow: true //自动显示等待框，默认为true
				}
			});
		});
	</script>

</html>